<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" xmlns:h="http://java.sun.com/jsf/html"
  xmlns:pr="http://java.sun.com/jsf/composite/totororo">
 
 <script>
function handleDrop(event, ui) {
	$(event.target).find("p").html("En cours d'ajout...");
	$('.loader img').css('display', 'block');
	setTimeout(function () {
		$(event.target).find("p").html("Glissez les livres ici!");
		$('.loader img').css('display', 'none');
    }, 3500);
}
</script>

	<h:panelGroup layout="block" rendered="${!is_cart_page}" styleClass="panier">
		<p:outputPanel autoUpdate="true">
			<h:outputText id="panier-empty" rendered="#{!display_cart}" value="Panier vide" />
			<h:outputText styleClass="panier-title" rendered="#{display_cart}" value="#{strings['panier.Votrepanier']}" />
			
			<h:dataTable rendered="#{display_cart}" value="#{cartController.order.items}" var="item" columnClasses="#{strings['panier.Qte']},#{strings['panier.Livre']},#{strings['panier.Prix']}">
		       <h:column>
		           <f:facet name="header" >
		               <h:outputText value="Qté"/>
		           </f:facet>    
		           <h:outputText value="#{item.quantity}"/>
		       </h:column>
		        <h:column>
		           <f:facet name="header" >
		               <h:outputText class="title" value="Livre"/>
		           </f:facet>    
		           <h:outputText value="#{item.book.title}"/>
		       </h:column>
		        <h:column>
		           <f:facet name="header" >
		               <h:outputText value="Prix"/>
		           </f:facet>    
		           <h:outputText value="#{item.book.price}"/>
		       </h:column>
		    </h:dataTable>
			<h:outputText styleClass="total" rendered="#{display_cart}" value="Total : #{cartController.order.total}" />
			<h:link outcome="cart" styleClass="cart-link" rendered="#{display_cart}" value="#{strings['panier.valider']}"/>
			<div class="clearer"></div>
		</p:outputPanel>
		<h:panelGroup id="drop" layout="block" styleClass="ui-widget-content"
						  style="height:75px;width:150px;margin-top:20px;">
		    <p style="margin: 0; padding: 5px;"> <h:outputLabel value="#{strings['panier.glisserLivre']}"/> </p>
		    <span class="loader"><img src="#{facesContext.externalContext.requestContextPath}/resources/images/loader.gif" /></span>
		    <p:droppable onDrop="handleDrop" datasource="availableProducts">
		    	<p:ajax listener="#{cartController.onDrop}" />
		    </p:droppable>
		</h:panelGroup>
	</h:panelGroup>
</ui:composition>